<!-- 模板 -->
<template>
  <div class="factor">
      <div class="box">
          <div class="btn">
            <!-- <el-button type="primary" icon="el-icon-plus" size="small" @click="add">添加</el-button> -->
             <div>
                <el-form  :inline="true"  :model="params" size="small"  label-width="80px" >
                    <el-form-item label="因子名称:">
                        <el-input  v-model="params.name" placeholder="输入因子名称"  clearable  @clear="search" /> 
                    </el-form-item>
                     <el-form-item label="测量表" >
                        <el-select v-model="params.tableId"  placeholder="请选择测量表" clearable filterable @change="search"  style="width: 100%;">
                            <el-option
                            v-for="item in options1"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    
                    <span style="margin-left:10px">
                        <el-button type="primary" icon="el-icon-search" size="small" @click="search">搜索</el-button>
                        <el-button type="primary" icon="el-icon-plus" size="small" @click="add" >添加</el-button>
                    </span>
                </el-form>
              </div>
          </div>
        <el-card>
            <el-table :data="tableData" border style="width: 100%" >
            <el-table-column prop="name" label="名称" align="center"> 
              <template slot-scope="scope">
                    <el-link   @click="chakan(scope.row)">{{scope.row.name}}</el-link>
              </template>
            </el-table-column>
            <el-table-column prop="subjectNumber" label="题目个数" align="center" > </el-table-column>
            <el-table-column prop="normalScore" label="正常分数" align="center" > </el-table-column>
            <!-- <el-table-column prop="normalExplain" label="正常解释" align="center" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span v-html="scope.row.normalExplain"></span>
              </template> 
            </el-table-column>
            <el-table-column prop="normalProposal" label="正常建议" align="center" :show-overflow-tooltip="true"> 
              <template slot-scope="scope">
                <span v-html="scope.row.normalProposal"></span>
              </template> 
            </el-table-column>
            <el-table-column prop="abnormalExplain" label="异常解释" align="center" :show-overflow-tooltip="true"> 
              <template slot-scope="scope">
                <span v-html="scope.row.abnormalExplain"></span>
              </template> 
            </el-table-column>
            <el-table-column prop="abnormalProposal" label="异常建议" align="center" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span v-html="scope.row.abnormalProposal"></span>
              </template> 
            </el-table-column> -->

            <el-table-column  label="操作" align="center" >
                <template slot-scope="scope">
                    <el-button @click="handleUpdateClick(scope.row)" type="primary" icon="el-icon-edit" size="small" plain>修 改</el-button>
                    <el-button @click="handleLookClick(scope.row)" type="primary" size="small" icon="el-icon-view" plain>查 看</el-button>
                    <el-button @click="handleDeleteClick(scope.row)" type="danger" size="small" icon="el-icon-delete" plain>删 除</el-button>
                </template>
            </el-table-column>
        </el-table>
        </el-card>
        <pagination
        v-show="newsTotal >0"
        :total="newsTotal"
        :page.sync="params.pageNum"
        :limit.sync="params.pageSize"
        @pagination="getFactorList"
        />
      </div>

<!-- 添加弹窗 -->
<el-dialog
  :title="title"
  :visible.sync="dialogVisible"
  width="45%"
  :before-close="handleClose">
<el-form :label-position="labelPosition" label-width="130px" :model="form" :rules="rules" ref="form">
  <el-form-item label="名称" prop="name">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="选择测量表" prop="factorTableList">
      <el-select v-model="form.factorTableList" multiple placeholder="请选择测量表"   style="width: 100%;">
          <el-option
          v-for="item in options1"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          >
          </el-option>
      </el-select>
  </el-form-item>
 
   <el-form-item label="分数是否为区间段" >
        <el-select v-model="form.type"  placeholder="请选择" clearable filterable style="width: 300px;" @change="changeType">
            <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            >
            </el-option>
        </el-select>
      </el-form-item>
  <el-form-item label="正常分数" v-if="typeShow">
    <el-input v-model.number="form.normalScore"></el-input>
  </el-form-item>
  <el-form-item label="正常解释" v-if="typeShow">
    <!-- <el-input v-model="form.normalExplain"  type="textarea"></el-input> -->
    <quill-editor 
      v-model="form.normalExplain" 
      ref="myQuillEditor" 
      :options="editorOption" >
    </quill-editor>
  </el-form-item>
  <el-form-item label="正常建议" v-if="typeShow">
    <!-- <el-input v-model="form.normalProposal"  type="textarea"></el-input> -->
    <quill-editor 
      v-model="form.normalProposal" 
      ref="myQuillEditor" 
      :options="editorOption" >
    </quill-editor>
  </el-form-item>
  <el-form-item label="异常解释"  v-if="typeShow">
    <!-- <el-input v-model="form.abnormalExplain"  type="textarea"></el-input> -->
    <quill-editor 
      v-model="form.abnormalExplain" 
      ref="myQuillEditor" 
      :options="editorOption" >
    </quill-editor>
  </el-form-item>
  <el-form-item label="异常建议" v-if="typeShow">
    <!-- <el-input v-model="form.abnormalProposal"  type="textarea"></el-input> -->
    <quill-editor 
      v-model="form.abnormalProposal" 
      ref="myQuillEditor" 
      :options="editorOption" >
    </quill-editor>
  </el-form-item>
  
      <el-form-item label="区间"  v-if="!typeShow">
    <el-radio-group
      v-model="form.descList"
      ref="select"
      style="width:100%"
    >
      <div v-for="item in number" :key="item.index" >
        <el-row :gutter="20">
          <el-col :span="14">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2 }"
              placeholder="请输入内容"
              v-model="item.suggestion"
            >
            </el-input>
          </el-col>
          <el-col :span="5">
            <el-input
              placeholder="请输入区间"
              v-model="item.score"
            >
            </el-input>
          </el-col>
        </el-row>
      </div>
    </el-radio-group>
    <el-form-item >
      <el-button
      type="primary"
      size="small"
      icon="el-icon-circle-plus-outline"
      @click="addSelect"
      >添加区间</el-button>
    </el-form-item>
    
  </el-form-item>
</el-form>
  <span slot="footer" class="dialog-footer" v-show="showBtn"> 
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="onSubmit" v-if="!show">确 定</el-button>
    <el-button type="primary" @click="update" v-else>修 改</el-button>
  </span>
</el-dialog>

<!-- 题目列表 -->
<el-dialog
  title="题目列表"
  :visible.sync="examDialogVisible"
  width="55%"
  :before-close="handleClose1">
  <el-table :data="list" border style="width: 100%" >
      <el-table-column type="expand"> 
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="选项：" style="margin-left:10px">
              <div v-for="(item,index) in props.row.examAnswerList" :key="index" class="imgBox">
                 <p class="nopadding">{{item.examOption}} <span>分数:{{item.fraction}}</span></p>
              </div>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="题目名称" align="center"> </el-table-column>
            
        </el-table>
  <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span> -->
</el-dialog>
  </div>
</template>

<script>
 import { quillEditor } from 'vue-quill-editor'
import { getList,getAdd,getUpdate, getSubject,getFactorDet,getFactorDes} from "@/api/factor/factor";
import { getList1 } from "@/api/table/table";
export default {
  name: '',
  data () {
    return {
        tableData: [],
        labelPosition: 'right',
        dialogVisible:false,
        examDialogVisible:false,
        title:'',
        params: {
            pageNum: 1,
            pageSize: 10,
        },
        newsTotal:0,
        paramsFlag: 0,
        editorOption:{
          modules:{
                toolbar:[
                  ['bold', 'italic', 'underline', 'strike'],
                  [{ 'size': ['small', false, 'large', 'huge'] }],
                  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                  [{ 'color': [] }, { 'background': [] }], 
                  [{ 'direction': 'rtl' }],
                  [{ 'indent': '-1'}, { 'indent': '+1' }],
                ]
            }
        },
        form:{
            name:'',
            subjectNumber:undefined,
            normalScore:undefined,
            normalExplain:'',
            normalProposal:'',
            abnormalExplain:'',
            abnormalProposal:'',
            factorTableList:[],
            descList:[],
            type:undefined,
        },
        factorForm:{
          name:'无',
          id:0,
          tableId:0,
        },
        options1:[],
        rules:{
          name: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          normalScore:[
            { required: true, message: '请填写正常分数', trigger: 'blur' },
            { type: 'number', message: '正常分数必须为数字值'}
          ],
          // factorTableList: [
          //   { required: true, message: '请选择测量表', trigger: 'change' }
          // ],
          normalExplain: [
            { required: true, message: '请填写正常解释', trigger: 'blur' }
          ],
          normalProposal: [
            { required: true, message: '请填写正常建议', trigger: 'blur' }
          ],
          abnormalExplain: [
            { required: true, message: '请填写异常解释', trigger: 'blur' }
          ],
          abnormalProposal: [
            { required: true, message: '请填写异常建议', trigger: 'blur' }
          ],
        },
        show:false,
        showBtn:true,
        tableShow:false,
        options:[],
        list:[],//题目列表
        a:[],
        typeShow:false,
        options2:[{
          value: 0,
          label: '否'
        }, {
          value: 1,
          label: '是'
        }],
        number: [
        {
          index: 0,
          suggestion: "",
          score:''
        },
        {
          index: 1,
          suggestion: "",
          score:'',
        },
        {
          index: 2,
          suggestion: "",
          score:'',
        },
      ],
    }
  },
  props: [],
  components: {},
  computed: {},
  filters: {},
  methods: {
    addSelect() {
      let i = this.number.length;
      this.number.push({
        index: i,
        suggestion: "",
        score:'',
      });
    },
    changeType(val){
      console.log(val);
      if(val == '0'){
        this.typeShow = true
      }else{
        this.typeShow = false
        this.number = [
        {
          index: 0,
          suggestion: "",
          score:''
        },
        {
          index: 1,
          suggestion: "",
          score:'',
        },
        {
          index: 2,
          suggestion: "",
          score:'',
        },
      ]
      }
    },
    // 删除按钮
    handleDeleteClick(row){
      const id = row.id ;
      // console.log(id)
      this.$confirm("是否确认删除?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(function() {
          return getFactorDet(id);
        })
        .then(() => {
          this.getFactorList();
          this.$message.success('删除成功')
        })
        .catch(function() {});
    },
    chakan(row){
        this.showBtn = false
        this.title = '查看'
        this.a = []
        getFactorDes(row.id).then(res=>{
            if(res.code == 200){
                // console.log(res);
        this.form = JSON.parse(JSON.stringify(res.data))
         for (let i = 0; i < this.form.factorTableList.length; i++) {
          this.a.push(this.form.factorTableList[i].id)
        }
          this.form.factorTableList = this.a
        this.number = this.form.descList;  
        // console.log(this.form);
        if(this.form.type == 0){
          this.typeShow = true
        }else{
          this.typeShow = false
        }
            }
        })
        // this.form = JSON.parse(JSON.stringify(row))
        // for (let i = 0; i < this.form.factorTableList.length; i++) {
        //   this.a.push(this.form.factorTableList[i].id)
        // }
        //   this.form.factorTableList = this.a
        // console.log(this.form);
        this.dialogVisible = true
    },
    // 关闭题目列表
    handleClose1(){
      this.examDialogVisible = false
    },
    // 查看
    handleLookClick(row){
      this.examDialogVisible =true
      getSubject(row.id).then(res =>{
        if(res.code == 200){
          // console.log(res);
          this.list = res.rows
        }
      })
    },
      //   修改操作
    update(){
      this.form.factorTableList.map((item,index,arr) =>{
               arr[index] = {
                 tableId:item,
               }
            })
            if(this.form.type == 1){
              // this.form.descList = this.number
               var data = [];
              this.number.forEach((item,index) => {
                if(item.suggestion !== ''){
                  data.push(item)
                }
              })
              this.form.descList = data;
            }
        this.$refs["form"].validate(valid => {
            if (valid) {
              getUpdate(this.form).then(res => {
              if(res.code == 200){
                  // console.log(res);
                  this.dialogVisible = false
                  this.$message.success("修改成功");
                  this.getFactorList()
              }
          })
          }
      });
          
    },
    handleUpdateClick(row){
        this.a = []
        this.showBtn = true
        this.show = true
        this.title = '修改'
        // this.form = JSON.parse(JSON.stringify(row))
        // this.number = this.form.descList;  
        getFactorDes(row.id).then(res=>{
            if(res.code == 200){
                // console.log(res);
        this.form = JSON.parse(JSON.stringify(res.data))
         for (let i = 0; i < this.form.factorTableList.length; i++) {
          this.a.push(this.form.factorTableList[i].id)
        }
          this.form.factorTableList = this.a
        this.number = this.form.descList;  
        // console.log(this.form);
        if(this.form.type == 0){
          this.typeShow = true
        }else{
          this.typeShow = false
        }
            }
        })
        // console.log(this.form);
       // // this.form.factorTableList = row.factorTableList.split(',')
       
          this.dialogVisible = true
      
    },
      handleClose(){
        this.dialogVisible = false
      },
      // 新增操作
       onSubmit() {
          var data = [];
          this.number.forEach((item,index) => {
            if(item.suggestion !== ''){
              data.push(item)
            }
          })
        this.form.descList = data;
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.form.factorTableList.map((item,index,arr) =>{
               arr[index] = {
                 tableId:item,
               }
            })
            // console.log(this.form);
             getAdd(this.form).then(res => {
                if(res.code == 200){
                    // console.log(res);
                    this.dialogVisible = false
                    this.form = {}
                    this.$message.success("新增成功");
                    this.getFactorList()
                }
            });
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },

    //   添加按钮
    add(){
        this.title = '添加'
        this.form = {
          descList:[],
        }
         this.number = [
        {
          index: 0,
          suggestion: "",
          score:''
        },
        {
          index: 1,
          suggestion: "",
          score:'',
        },
        {
          index: 2,
          suggestion: "",
          score:'',
        },
      ]
        // this.options1.push(JSON.parse(JSON.stringify(this.factorForm)))
        // console.log(this.options1);
        this.dialogVisible = true
        this.showBtn = true
        this.show = false
    },
    //   获取所有
      getFactorList() {
        getList(this.params).then(res => {
            if(res.code == 200){
                // console.log(res);
                this.tableData = res.rows
                this.newsTotal = res.total;
            }
        });
    },
      // 触发搜索按钮
    search() {
      this.$set(this.params, "pageNum", 1);
      console.log(this.params);
      this.paramsFlag = 0;
      this.getFactorList();
    },
     //   获取所有测量表
      getTableList() {
        getList1().then(res => {
            if(res.code == 200){
                // console.log(res);
                this.options1 = res.rows
                // console.log(this.tableData,this.options);
                // for (let i = 0; i < this.tableData.length; i++) {
                //    for (let j = 0; j < this.options.length; j++) {
                //        if(this.tableData[i].categoryId == this.options[j].id){
                //         //    console.log(this.options[j].name);
                //            this.tableData[i]['categoryName'] = this.options[j].name
                //        }
                //    }
                // }
            }
        });
    },
  },
  created () {
      this.getFactorList()
      this.getTableList()
  },
  mounted () {}
}
</script>

<style rel="stylesheet/scss" lang="scss">
.box{
    margin: 10px;
    .btn{
        margin-top: 20px;
    }
}
.nopadding {
  padding: 0;
  margin: 0;
}
.el-tooltip__popper {
  max-width: 60% !important;
}
.el-tooltip__popper,
.el-tooltip__popper.is-dark {
  max-width: 50% !important;
  line-height: 24px;
  color: #fff !important;
  background-color: rgb(48, 65, 86) !important;
}
 .el-row {
    margin-bottom: 20px !important;
    &:last-child {
      margin-bottom: 0 ;
    }
  }
</style>
